<template lang="html">
  <div class="full">
    <div class="top_blank">
      <span @click="back()"><</span>
      <h3>{{ title }}</h3>
    </div>
    <ul class="zhuce_ul_a">
      <li>
        <img src="../../static/userword.png" alt="">
        <input v-model="user4" type="text" name="" value="" placeholder="请输入用户名">
      </li>
      <li>
        <img src="../../static/pass_a.png" alt="">
        <input v-model="pass4" type="password" name="" value="" placeholder="请输入密码">
      </li>
      <li>
        <img src="../../static/mbquestion.png" alt="">
        <input v-model="xingming4" class="mibaoquestion" type="text" name="" value="" placeholder="请输入您的真实姓名(填写密保问题)">
      </li>
    </ul>
    <span @click="getData()" class="dengluBtn">确认注册</span>
  </div>
</template>

<script>
export default {
  data(){
    return{
      title:'注册新用户',
      user4:'',
      pass4:'',
      xingming4:'',
      flag:1

    }
  },
  methods:{
    back(){
      this.$router.push({name:'one'})
    },
    getData(){
      if (this.flag == 1) {
        console.log(this.user4);
        console.log(this.pass4);
        console.log(this.xingming4);
        // console.log(this);
        let userNameReg = /^[a-zA-Z0-9]{9,20}$/g;
        let a = userNameReg.test(this.user4);
        let passWordReg = /^[a-zA-Z0-9]{6,16}$/g;
        let b = passWordReg.test(this.pass4);
        if (!a) {
          this.$Message.warning('用户名格式不正确');
        }else if(!b){
          this.$Message.warning('密码格式不正确');
        }else if(this.xingming4 == ''){
          this.$Message.warning('密保问题不能为空');
        }else{
          this.axios.post('http://txspring.cn:8080/register',JSON.stringify({"user":this.user4,"pass":this.pass4,"mibao":this.xingming4})).then(respone=>{
            console.log(respone);
            if (respone.data.code==1) {
              this.$Message.success(respone.data.des);
              this.$router.push({name:'one'});
            }else if(respone.data.code==0){
              this.$Message.warning(respone.data.des);
            }
          })
        }
        this.flag = 0;
        setTimeout(()=>{
          this.flag = 1;
        },1500);
      }

    }
  }
}
</script>

<style lang="css">
  .dengluBtn{
    color: white;
    line-height: 2.5rem;
    background: #00b0ec;
    display: inline-block;
    height: 2.5rem;
    width: 90%;
    border-radius: .5rem;
    margin-top: 10px;
  }
  .mibaoquestion{
    width: 60%;
  }
  .zhuce_ul_a{
    width: 90%;
		padding: 0;
		margin: auto;
		margin-top: 10px;
  }
  .zhuce_ul_a>li{
    list-style: none;
		text-align: left;
		width: 100%;
		line-height: 3.5rem;
		border-bottom: 1px solid lightgray;
		margin: auto;
  }
  .zhuce_ul_a>li>input{
  		outline: none;
  		border: none;
  }
  .full{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: white;
  }
  .top_blank{
    background-color: #00b0ec;
    text-align: center;
    color: white;
    height: 3rem;
    line-height: 3rem;
  }
  .top_blank>h3{
    display: inline-block;
      font-size: 1.5rem;
  }
  .top_blank>span{
    float: left;
    display: inline-block;
    font-size: 1.5rem;
  }
  .zhuce_ul_a>li img{
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
  }
</style>
